<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/base-loading.js"></script>
    <title>被拘留人拘留区出入登记</title>
    <script type="text/javascript">mxBasePath = '../../js/process';</script>
    <script type="text/javascript" src="../../js/process/js/mxClient.js"></script>
    <link rel="stylesheet" type="text/css"href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/xyy.css">
    <link rel="stylesheet" type="text/css"href="../font-awesome-4.7.0/css/font-awesome.css">
    <script src="../../js/plugins/easyui/jquery/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/plugins/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/plugins/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .tabs{
            background-color:white;
        }
        input{
            border: none;
            outline: none;
        }
        .kv-group .kv-item .item-lt {
            color: #000000 !important;
        }
        .datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber
        {
            text-overflow: ellipsis;
        }
        .panel-tool a {
            display: inline-block;
            width: 16px;
            height: 16px;
            opacity: 0.6;
            filter: alpha(opacity = 60);
            margin: 0 0 0 2px;
            vertical-align: top;
        }

        .gjlWz{
            text-align:right;
        }
        .lump {
            float: left;
            font-size: 12px;
        }

        #contextMenu_ryjbxx:hover {
            cursor: pointer;
        }

        #contextMenu_ldsq:hover {
            cursor: pointer;
        }

        #zqt + .textbox{
            height: 22px!important;
            width: 265px!important;
        }

        .tabs{
            background-color:ghostwhite;
            height:26px !important;
            border-bottom:#95B8e7;
        }

        .button {
            background: #79bbff;
            background-image: -webkit-linear-gradient(top, #79bbff, #378de5);
            background-image: -moz-linear-gradient(top, #79bbff, #378de5);
            background-image: -ms-linear-gradient(top, #79bbff, #378de5);
            background-image: -o-linear-gradient(top, #79bbff, #378de5);
            background-image: linear-gradient(to bottom, #79bbff, #378de5);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-family: Arial;
            color: #ffffff;
            font-size: 16px;
            padding: 0px 0px 4px 0px;
            border: solid #337bc4 1px;
            text-decoration: none;
            margin-top:5%;
        }

        .button:hover {
            color: #ffffff;
            background: #378de5;
            text-decoration: none;
            cursor: pointer;
        }

        .abutton{
            width:34px;
            height:77px;
        }
    </style>
</head>
<body class="gray-bg" style="margin: 0px; overflow: hidden;">

<div class="easyui-tabs" style="width:100%;height:900px;overflow:hidden;">
    <div title="业务流程" style="padding:0px;">
        <div class="easyui-layout"   data-options="fit:true"  style="width: 100%; height:100%; border-right-width: 0px; padding-right: 0px; margin-right: 0px">
            <div  data-options="region:'center',iconCls:'icon-dingdan'," style="width: 100%; height:40%;padding: 0px">
	            <span id="pictureId" style="position:absolute ;top:170px;
			        background:#ACD6FF;z-index:9999;width:200px;display: none;">
	             </span>
                <div id="main" style="height:200px"></div>
            </div>
        </div>
    </div>



    <div title="业务动态" style="padding:0px">
        <div style="background-color: #95c4ec;width: 90%;height:62% ;margin: 0 auto;overflow: auto;" >
            <div style="background-color: #ffffff;width: 95%;margin: 0 auto;margin-top: 2%;margin-bottom: 10px;padding-bottom: 10px;">
                <p style="text-align:center;font-weight: bold;font-size: 20px;margin-top: 10px;padding: 20px 0 0 0;">拘留区出入登记业务动态</p>
                <hr style="background-color: #95c4ec;height: 1px;width:96%;margin-bottom: 15px;"/>
                <span style="margin-left: 15%"><label style="font-size: 14px;width: 100px;display: inline-block;">请选择时间段</label><input class="easyui-datebox" style="margin-left: 10%;border: 1px solid #52a1ec;width: 120px;"/><label style="font-size: 14px;">&nbsp;至&nbsp;</label><input class="easyui-datebox" style="border: 1px solid #52a1ec;width: 120px;"/></span>
                <span style="margin-left: 13%;"><label style="font-size: 14px;">单位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" class="easyui-textbox" style="margin-left: 5%;border: 1px solid #52a1ec;width: 120px;height: 22px;"/>
							<span class="buttongroup" style="width: 58px;margin-left: 9%;" style="font-size: 14px;float: right;" >
                                <a href="#" id="jwzx_query" class="easyui-linkbutton button" data-options="toggle:true,group:'g1'" style="background-color: #378de5;width: 58px;position: relative;right: 40px;top: -30px;display: inline-block;left: auto">查询记录</a></span>
						</span>
                <br><br><br>
                <table style="font-size: 12px;border-collapse: collapse;background-color: #ffffff;width: 95%;margin-left: 24px;position: relative;margin-bottom: 20px;">
                    <tbody align="center">
                    <tr style="border: solid 1px #cfcfcf;">
                        <td align="center" style=" font-size: 15px   ;border: solid 1px #cfcfcf;width: 50%;background-color: #daf2fc;border-left: 2px solid #95c4ec;border-top: 2px solid #95c4ec"><span>出拘留区</span></td>
                        <td align="center" style=" font-size: 15px   ;border: solid 1px #cfcfcf;width: 50%;background-color: #daf2fc;border-left: 1px solid #cfcfcf;border-right:2px solid #95c4ec;border-top: 2px solid #95c4ec; "><span>回拘留区</span></td>
                    </tr>
                    <tr style="border: solid 1px #cfcfcf;">
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #e9eff3;border-left: 2px solid #95c4ec;border-bottom: 2px solid #95c4ec;"><input type="text" class="lrx" style="text-align: center;color: #912627;background-color: #e9eff3;" readonly /></td>
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #e9eff3;border-right: 2px solid #95c4ec;border-bottom: 2px solid #95c4ec;"><input type="text" class="lrx" style="text-align: center;color: #912627;background-color: #e9eff3;" readonly /></td>
                    </tr>
                    </tbody>
                </table>
                <br>
                <table style="font-size: 12px;border-collapse: collapse;background-color: #ffffff;width: 95%;margin-left: 24px;position: relative;margin-bottom: 20px;">
                    <tbody align="center">
                    <tr style="border: solid 1px #cfcfcf;">
                        <td align="center" style=" font-size: 15px   ;border: solid 1px #cfcfcf;width: 50%;background-color: #daf2fc;border-left: 2px solid #95c4ec;border-top: 2px solid #95c4ec; "><span>出拘留所原因</span></td>
                        <td align="center" style=" font-size: 15px   ;border: solid 1px #cfcfcf;width: 50%;background-color: #daf2fc;border-right:2px solid #95c4ec;border-top: 2px solid #95c4ec; "><span>人数</span></td>
                    </tr>
                    <tr style="border: solid 1px #cfcfcf;">
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #daf2fc;border-left: 2px solid #95c4ec;"><span>提询</span></td>
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #e9eff3;border-right: 2px solid #95c4ec;"><input type="text" class="lrx" style="text-align: center;color: #912627;background-color: #e9eff3" readonly/></td>
                    </tr>
                    <tr style="border: solid 1px #cfcfcf;">
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #daf2fc;border-left: 2px solid #95c4ec;"><span>律师会见</span></td>
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #e9eff3;border-right: 2px solid #95c4ec;"><input type="text" class="lrx" style="text-align: center;color: #912627;background-color: #e9eff3" readonly/></td>
                    </tr>
                    <tr style="border: solid 1px #cfcfcf;">
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #daf2fc;border-left: 2px solid #95c4ec;"><span>亲属会见</span></td>
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #e9eff3;border-right: 2px solid #95c4ec;"><input type="text" class="lrx" style="text-align: center;color: #912627;background-color: #e9eff3;" readonly/></td>
                    </tr>
                    <tr style="border: solid 1px #cfcfcf;">
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #daf2fc;border-left: 2px solid #95c4ec;"><span>所外就医</span></td>
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #e9eff3;border-right: 2px solid #95c4ec;"><input type="text" class="lrx" style="text-align: center;color: #912627;background-color: #e9eff3" readonly /></td>
                    </tr>
                    <tr style="border: solid 1px #cfcfcf;">
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #daf2fc;border-left: 2px solid #95c4ec;"><span>临时离所</span></td>
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #e9eff3;border-right: 2px solid #95c4ec;"><input type="text" class="lrx" style="text-align: center;color: #912627;background-color: #e9eff3" readonly /></td>
                    </tr>
                    <tr style="border: solid 1px #cfcfcf;">
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #daf2fc;border-left: 2px solid #95c4ec;border-bottom: 2px solid #95c4ec;"><span>其他</span></td>
                        <td style="border: solid 1px #cfcfcf;width: 50%;background-color: #e9eff3;border-right: 2px solid #95c4ec;border-bottom: 2px solid #95c4ec;"><input type="text" class="lrx" style="text-align: center;color: #912627;background-color: #e9eff3;" readonly/></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div title="业务台账" style="padding:0px">
        业务台账
    </div>

</div>

<script type="text/javascript">
    var user_permission = 2 ; 	//设置获取到的用户权限
    var rsdj_permission = 2 ;	//设置出所管理需要的权限
    var container = document.getElementById("main");
    var graph = new mxGraph(container);
    var parent = graph.getDefaultParent();

    graph.setHtmlLabels(true);

    graph.setEnabled(false);

    var style = {};

    style = graph.getStylesheet().getDefaultEdgeStyle();//圆角连线
    style[mxConstants.STYLE_ROUNDED] = true;//圆角连线
    style = mxUtils.clone(style);
    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;  // 不设置这个属性 背景图片不出来

    style[mxConstants.STYLE_STROKECOLOR] = '#f5f5f5';

    style[mxConstants.STYLE_FILLCOLOR] = '#f5f5f5';

    style[mxConstants.STYLE_FONTCOLOR] = 'black';

    style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;

    style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;

    style[mxConstants.STYLE_FONTSIZE] = 13;

    style[mxConstants.STYLE_IMAGE_ALIGN] = 0;

    style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 0;

    style[mxConstants.STYLE_IMAGE] = '../../img/lcttx.png';

    style[mxConstants.STYLE_IMAGE_WIDTH] = 80;

    style[mxConstants.STYLE_IMAGE_HEIGHT] = 80;

    style[mxConstants.STYLE_SPACING_TOP] = 30;

    style[mxConstants.STYLE_SPACING] = 0.5;

    graph.getStylesheet().putCellStyle("style1", style);

    var style2 = {};

    style2 = graph.getStylesheet().getDefaultEdgeStyle();//圆角连线
    style2[mxConstants.STYLE_ROUNDED] = true;//圆角连线
    style2 = mxUtils.clone(style);
    style2[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;  // 不设置这个属性 背景图片不出来

    style2[mxConstants.STYLE_STROKECOLOR] = '#f5f5f5';

    style2[mxConstants.STYLE_FILLCOLOR] = '#f5f5f5';

    style2[mxConstants.STYLE_FONTCOLOR] = 'black';

    style2[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;

    style2[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;

    style2[mxConstants.STYLE_FONTSIZE] = 13;

    style2[mxConstants.STYLE_IMAGE_ALIGN] = 0;

    style2[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 0;

    style2[mxConstants.STYLE_IMAGE] = '../../img/zh.png';

    style2[mxConstants.STYLE_IMAGE_WIDTH] = 80;

    style2[mxConstants.STYLE_IMAGE_HEIGHT] = 80;

    style2[mxConstants.STYLE_SPACING_TOP] = 30;

    style2[mxConstants.STYLE_SPACING] = 0.5;

    graph.getStylesheet().putCellStyle("style2", style2);




    //获取流程节点的待办数量
    var cjlqdjCount=0;
    var hjlqjcdjCount=0;



    // 画人物
    var v1 = graph.insertVertex(parent, 'cjlqdj', '出拘留区登记<font color="red"></font>', 500, 220, 100, 105, "style1");
    var v2 = graph.insertVertex(parent, 'hjlqjcdj', '回拘留区检查登记<font color="red"></font>', 700, 220, 100, 105, "style2");


    // 连线
    graph.insertEdge(parent, null, '',v1, v2 , "edgeStyle=elbowEdgeStyle;");








    //添加事件
    graph.addListener(mxEvent.CLICK, function(sender, evt) {
        var cell11 = evt.getProperty('cell');
        //graph.setCellStyles(fillColor,black);
        if(cell11==null){
            $("#pictureId").css({"display":"none"});
            return ;
        }else if(cell11.id=='cjlqdj'){
            window.location.href='/jls_bjlrjlqcrdj/cjlqdj.html';
        }else if (cell11.id=='hjlqjcdj'){
            window.location.href='';
        }
    });
    //鼠标悬浮效果
    var track = new mxCellTracker(graph);
    var self = this;
    track.mouseMove = function(sender, me) {
        var cell1 = this.getCell(me);
        if(cell1==null){
            $("#pictureId").css({"display":"none"});
            return ;
        }else{
            if(cell1.id=="tscldj"){
                $("#pictureId").css({"display":"block","left":"250px","top":"170px"});
                $("#pictureId").html("投诉处理登记登记！");
            }else if (cell1.id=="ldsp"){
                $("#pictureId").css({"display":"block","left":"550px","top":"170px"});
                $("#pictureId").html("领导审批！");
            }else if (cell1.id=="cldjcljg"){
                $("#pictureId").css({"display":"block","left":"850px","top":"170px"});
                $("#pictureId").html("登记处理结果！");
            }
        }
    };
    //
    function bodyScale(){
        var main = document.getElementById("main"); //获取id="main"
        var devicewidth=document.documentElement.clientWidth;
        var scale=devicewidth/1275;//除去当前流量器分辨率1275
        main.style.zoom=scale;//zoom是设置或检索对象的缩放比例.
    }
    window.onload=window.onresize=function(){
        bodyScale();
    }
</script>
<script type="text/javascript">
    //自适应任何设备屏幕
    function bodyScale(){
        var main = document.getElementById("main"); //获取id="main"
        var devicewidth=document.documentElement.clientWidth;
        var scale=devicewidth/1275;//除去当前流量器分辨率1275
        main.style.zoom=scale;//zoom是设置或检索对象的缩放比例.
    }
    window.onload=window.onresize=function(){
        bodyScale();
    }
</script>

</body>
</html>
